<template>
  <div id="nav">
    <!-- <div>
      <wxjButton>大小</wxjButton>
      <wxjButton size="small">small</wxjButton> 
      <wxjButton size="narmal">narmal</wxjButton> 
      <wxjButton size="big">big</wxjButton>
    </div>

    <div>
      <wxjButton>状态</wxjButton>
      <wxjButton type="success">success</wxjButton> 
      <wxjButton type="error">error</wxjButton> 
      <wxjButton type="warning">warning</wxjButton>
    </div>

    <div>
      <wxjButton>圆角</wxjButton>
      <wxjButton :radius="true">true</wxjButton> 
      <wxjButton :radius="false">false</wxjButton> 
    </div>

    <div>
      <wxjButton>禁用</wxjButton>
      <wxjButton disabled>true</wxjButton> 
      <wxjButton>false</wxjButton> 
    </div> -->

    <!-- <div>
      <wxjButton>事件</wxjButton>
      <wxjButton @click="handleClick">success</wxjButton> 
    </div> -->

    <!-- <div>
      <wxjLink>状态</wxjLink>
      <wxjLink type="success">success</wxjLink> 
      <wxjLink type="error">error</wxjLink> 
      <wxjLink type="warning">warning</wxjLink>
      <wxjLink color="#789">自定义</wxjLink>
    </div>

    <div>
      <wxjLink>下划线</wxjLink>
      <wxjLink underline>success</wxjLink> 
    </div>

    <div>
      <wxjLink>禁用</wxjLink>
      <wxjLink disabled>success</wxjLink> 
    </div> -->

    <div>
      <wxjInput radius focus placeholder="please put your name" />
      <wxjInput type="password" />
      <wxjInput v-model="inputVal" />
    </div>

    <MyButton ref="buttonRef" />

    <wxjButton @click="getbuttonRef">getbuttonRef</wxjButton>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

import MyButton from "@/components/myButton.vue";

const buttonRef = ref<InstanceType<typeof MyButton>>();

const inputVal = ref("deg");

const handleClick = (val: string) => {
  console.log("hello" + val);
};

const getbuttonRef = () => {
  console.log(buttonRef.value);
};
</script>
<style lang="scss"></style>
